<section>
  <mat-card class="loading-background">
    <img
      mat-card-image
      ngSrc="/assets/images/{{ listing?.photos?.[0] }}"
      alt="{{ listing?.title }}"
      class="listing-image"
      (load)="onImageLoad($event)"
      width="177"
      height="100"
      priority
    />
    <mat-card-content>
      <mat-card-title>{{ listing?.title }}</mat-card-title>
      <mat-card-subtitle>{{ listing?.address?.[1] }}, {{ listing?.address?.[2] }}</mat-card-subtitle>
      <p class="listing-description">{{ listing?.description?.substr(0, 100) }}...</p>

      <app-favorite-button
        class="listing-favorite__button"
        [class.hidden]="isOperationLoading()"
        *appHasRole="[userRole.Admin, userRole.Renter]"
        [listing]="listing"
      ></app-favorite-button>
    </mat-card-content>
    <mat-card-actions>
      <div>
        <h2>{{ monthlyRentPriceWithDiscount() | currency: listing?.fees?.[5]?.substring(4) }}/month</h2>
        <h5>
          {{ listing?.bedrooms | i18nPlural : bedroomsMapping }},
          {{ listing?.bathrooms | i18nPlural : bathroomsMapping }}
        </h5>
      </div>
      <a
        mat-flat-button
        color="primary"
        class="card-link"
        [title]="listing?.title"
        [routerLink]="['/listing/' + listing?.id + '/' + listing?.slug]"
        [state]="{ listing }"
        >View listing</a
      >
    </mat-card-actions>
  </mat-card>
</section>
